<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/Puplic.css">
    <link rel="stylesheet" href="./css/Index.css">
    <link rel="stylesheet" href="./css/Details.css">
</head>
<body>
<div class="main-goods-list" id="appMain">
    <div class="main-box">
        <div class="main-box-right fl">
            <ul>
                <Goods-Item
                    v-for="item in list"
                    :key="item.goodsId"
                    :img="item.goodsImg"
                    :name="item.goodsName"
                    :id="item.goodsId"
                    :price="item.price"
                    :is-Hot="item.isHot"
                    :is-New="item.isNew"
                    @click="goToDetail(item.goodsId)"
                ></Goods-Item>
            </ul>
        </div>
    </div>
</div>
<div class="mi-detail" id="appDetail">
    <div class="product-intro">
        <!-- 放大镜,start -->
        <Magnifier
            :d="detailData"
        ></Magnifier>
        <!-- 放大镜,end -->
        
        <!-- 产品介绍 -->
        <div class="product-con fl">
            <div class="product-title">
                <h1 class="title-text">{{detailData.goodsName}}</h1>
            </div>
            <div class="product-price">
                <dl class="price-cur">
                    <dt class="metatit">价格</dt>
                    <dd>
                        <span class="price">¥{{detailData.price}}元</span>
                    </dd>
                </dl>
                <dl class="shopPromotion-title">
                    <dt class="metatit">活动一</dt>
                    <dd>满6900元减2000元</dd>
                    <a class="more">
                        更多优惠
                        <i class="iconfont">&#xe69a;</i>
                    </a>
                </dl>
            </div>

            <div class="meta">
                <dl class="delivery-panel">
                    <dt class="metatit">运费</dt>
                    <dd class="postAge">
                        <span class="deliveryAdd">北京</span>
                        至
                        <span class="mui_addr_icon ">上海 黄浦区 </span>
                        <i class="iconfont">&#xe69a;</i>
                        <div class="postAge-info">
                            <p>快递: 0.00 </p>
                        </div>
                    </dd>
                </dl>
            </div>

            <ul class="ind-panel">
                <li class="ind-item">
                    <span class="label">月销量</span>
                    <span class="count">1000+</span>
                </li>
                <li class="ind-item">
                    <span class="label">累计评价</span>
                    <span class="count">1882</span>
                </li>
                <li class="ind-item">
                    <span class="label">送小米积分 <i>999</i>起</span>
                </li>
            </ul>

            <div class="type-list">
                <dl class="Network-sel">
                    <dt>网络类型</dt>
                    <dd class="Network">SA/NSA双模(5G)</dd>
                </dl>
                <dl class="phone-type">
                    <dt>选择颜色</dt>
                    <dd class="color-black">黑色</dd>
                    <dd class="color-blue">陶瓷特别版</dd>
                </dl>
                <dl class="Package-type">
                    <dt>购买方式</dt>
                    <dd class="Package">官方标配</dd>
                </dl>
                <dl class="storage-type">
                    <dt>存储容量</dt>
                    <dd class="storage-capacity-1">12+256GB</dd>
                    <dd class="storage-capacity-2">12+512GB</dd>
                    <dd class="storage-capacity-3">16+512GB</dd>
                </dl>
            </div>
            <div class="amount">
                <span class="num">数量</span>
                <input class="number" value="1" maxlength="8" title="请输入购买量">
                <div class="mui-amount-btn">
                    <span class="mui-amount-increase iconfont">&#xe601;</span>
                    <span class="mui-amount-increase iconfont">&#xe731;</span>
                </div>
                <span class="several_pieces">件</span>
            </div>
            <div class="btn-action">
                <a v-if="detailData.sale == 3973" class="J_LinkBasket">
                    到货通知
                </a>
                <span v-else>
                    <div class="btn-buy">
                        <a href="#" title="点击此按钮，到下一步确认购买信息。">立即购买</a>
                    </div>
                    <div class="btn-basket" id="">
                        <i style="display: none;">
                            <span></span>
                        </i>
                        <a class="J_LinkBasket">
                            <em class="iconfont">&#xe638;</em>
                            加入购物车
                        </a>
                    </div>
                </span>
            </div>

            <div class="ser-wrap">
                <dl class="ser-box">
                    <dt class="metatit">服务承诺</dt>
                    <dd class="ser-list">
                        <ul class="serPromise">
                            <li>
                                <a href="#">全国联保</a>
                            </li>
                            <li>
                                <a href="#">正品保证</a>
                            </li>
                            <li>
                                <a href="#">免举证退换货</a>
                            </li>
                            <li>
                                <a href="#">极速退款</a>
                            </li>
                            <li>
                                <a href="#">退货运费险</a>
                            </li>
                            <li>
                                <a href="#">七天无理由退换</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <div class="pay-box">
                    <span>支付方式</span>
                    <i class="iconfont">&#xe731;</i>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../vue.global.js"></script>
<script src="./components/GoodsItem.js"></script>
<script src="./components/Magnifier.js"></script>
<script src="./js/tools.js"></script>
<script>

    const url = "http://20.187.111.28:3000/getgoods";
    const { createApp, onMounted, reactive, watchEffect, ref } = Vue;
    const appMain = createApp({
        setup(){
            const list = reactive([]);

            onMounted(()=>{
                fetch(url).then(res=>res.json()).then(res=>{
                    list.push(...res.data.slice(33, 37));
                    list.forEach((val,idx)=>{
                        val.isHot = idx%2 ? true : false;
                        val.isNew = idx%3 ? true : false;
                    })
                })
            })

            function goToDetail(id){
                // 提前准备出发中央事件总线身上的传输id的自定义事件
                tools.E.emit("getId", id);
            }

            return { list, goToDetail };
        },
        components:{ GoodsItem }
    });
    appMain.mount("#appMain");


    const appDetail = createApp({
        setup(){
            let detailData = reactive({});
            onMounted(()=>{
                tools.E.on("getId", (id)=>{
                    fetch(url + "?id=" + id).then(res=>res.json()).then(res=>{
                        const d = res.data[0];
                        detailData.goodsImg = d.goodsImg;
                        detailData.goodsName = d.goodsName;
                        detailData.price = d.price;
                        detailData.sale = d.sale;
                        detailData.stock = d.stock;
                    })
                })
            })
            return { detailData };
        },
        components:{ Magnifier }
    });
    appDetail.mount("#appDetail");

</script>
</body>
</html>